<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>keyframe-animation</title>
  <link rel="stylesheet" href="reset.css">
  <style>
    .rabbit {
      position: absolute;
      left: 100px;
      width: 102px;
      height: 80px;
      background-repeat: no-repeat;
    }

    .label {
      position: absolute;
      left: 100px;
      transform: translateY(80px);
    }

    #rabbit1, #label1 {
      top: 50px;
    }

    #rabbit2, #label2 {
      top: 200px;
    }

    #rabbit3, #label3 {
      top: 350px;
    }

    #rabbit4, #label4 {
      top: 500px;
    }
  </style>
</head>
<body>
<div id="rabbit1" class="rabbit"></div>
<div id="rabbit2" class="rabbit"></div>
<div id="rabbit3" class="rabbit"></div>
<div id="rabbit4" class="rabbit"></div>

<div id="label1" class="label">无限循环动画，点击可以暂停和播放</div>
<div id="label2" class="label">重复3次动画并等待1秒后执行win动画</div>
<div id="label3" class="label">重复3次并打印完成动画</div>
<div id="label4" class="label">重复1次lose动画</div>

<script src="./animation.min.js"></script>
<script src="index.js"></script>
</body>
</html>
